<template>
  <el-row style="margin-top:20px;position:relative;">
    <el-col :span="3">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="18">
      <el-row style="margin-top:10px">
        <el-col :span="16">
          <div class="videoPaly" style="background-color:white">
            <div class="live_top" style="padding: 20px">
              <div style="float:left;">
              <span style="font-size: 16px;font-weight: 500;color: #414a60;">
              {{video.videoTitle}}
              </span>
                <div style="font-size: 13px;color: #414a60;line-height: 20px; margin-top: 8px">
                  发布时间：<span>{{video.createTime}}</span>
                </div>
              </div>
            </div>
              <video id="live"
                  :src="this.video.videoUrl"
                  style="background-color: black"
                  controls="controls"
              >
              </video>
            <div style="padding:20px">
              <el-descriptions :column="2" title="视频介绍">
                <el-descriptions-item label="宣讲人">{{ video.speaker }}</el-descriptions-item>
                <el-descriptions-item label="宣讲单位">{{ video.institutions }}</el-descriptions-item>
                <el-descriptions-item label="宣讲内容">
                 {{video.videoIntroduce}}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>


        </el-col>
        <el-col :span="8">
          <div class="hot_article">
            <div class="choice">
              <span style="font-size:18px;color: #606266;">热门职位</span>
              <el-divider direction="horizontal"></el-divider>

              <div class="sub-li" style="cursor:pointer" v-for="job in jobList" :key="job.jobId" @click=goJobDetail(job.jobId)>
                <div class="sub-li-top">
                  <p class="name">{{job.jobName}}</p>
                  <p class="salary">{{job.minSalary}}-{{job.maxSalary}}K</p>
                  <p class="job-text"> {{codeToText(job.cityCode)}}
                    <el-divider direction="vertical"></el-divider>
                    {{job.experience}}
                    <el-divider direction="vertical"></el-divider>
                    {{job.minEdu}}
                  </p>
                  <el-divider style="margin: 8px 0 12px 0;"></el-divider>
                </div>
              </div>
            </div>
          </div>
        </el-col></el-row>

    </el-col>
    <el-col :span="3">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
  </el-row>
</template>

<script>


import {getJobList, getVideo} from "@/network/recruit";
import {CodeToText} from "element-china-area-data";
export default {
  name: "PreachVideoDetail",
  data(){
    return{
      videoId:'',
      video:'',
      jobList:[],
    }
  },
  mounted() {
    if(this.$route.params.videoId!=undefined){
      sessionStorage.setItem("videoId",this.$route.params.videoId);
    }
    this.videoId = sessionStorage.getItem("videoId")
    this.videoShow();
  },
  methods:{
    goJobDetail(jobId){
      this.$router.push({name:"jobDetail",params:{jobId:jobId}});
    },
    videoShow(){
      getVideo(this.videoId).then(res=>{
        if(res!=undefined){
          this.video = res.data.data;
          this.allJobList(this.video.institutions);
        }

      })
    },
    allJobList(data){
      getJobList(data,1,10).then(res=>{
        this.jobList = res.data.data.list;
      })
    },
    codeToText(value){
      return CodeToText[value];
    },
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  min-height: 666px;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
  background-color:white;
}

#live{
  height:440px;width:100%;background-color:black;clear:both;margin-top:40px
}
/deep/ .el-textarea__inner{
  resize:none;
  height:110px;
  background-color: #f3f5fa;
}

.sub-li {
  height: 90px;
  width: 100%;
padding: 16px 0 0 ;
  box-sizing: border-box;
  background-color: white;
}

p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 15px;
  color: #414a60;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 40%;
  text-align: right;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company {
  height: 30px;
}

.job-text {
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 8px 0 12px 0;
}

.company_name {
  display: inline-block;
  margin: 0 20px 0 10px;
  color: #61687c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
}

.company_industry {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  position: relative;
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  position: relative;
  top: 8px;
  color: #8a8a8a;
  float: right;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}
</style>